<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>随访家园患者端</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="bookmark" href="/favicon.ico"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
    @import './assets/css/mint-ui.css';
    @import './assets/css/common.css';
    @import './assets/css/normalize.css';
    @import './assets/css/MPreview.mobile.css';

    .apply-call-ipt-box {overflow: hidden;}
    .apply-call-ipt-box .mint-cell{padding-bottom: 10px;overflow: visible;}
    .apply-call-ipt-box .mint-cell:before{transform:scaleY(1)}
    .apply-call-ipt-box .mint-cell:after,.apply-call-ipt-box .mint-cell:nth-last-of-type(1):before{border: 0;}
    .apply-call-ipt-box .mint-cell:before,.apply-title-box .mint-cell:before{left: 10px;}
    .apply-call-ipt-box .mint-cell .mint-cell-value span{padding-left: 10px;color: #aaa;}
    .apply-call-ipt-box .mint-cell-label p{color: #363636;line-height: 22px;margin-bottom: 5px;}
    .apply-title-box .mint-cell:after{display: none;}
    .apply-img{width: 50px;height: 50px;border-radius: 50%;overflow:hidden;margin:0 10px;text-align: center;}
    .apply-img img{width: 100%;min-height: 100%;height: auto}
    .apply-title-box .mint-cell-label{font-size: 14px;}
    .apply-title-box .mint-cell-label span:nth-of-type(1){max-width: 65%;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;display: inline-block;}
    .apply-title-box .mint-cell-label span:nth-of-type(2){max-width: 35%;}
    .apply-title-box .mint-cell-text span.fr{line-height: 20px;}
    .apply-call-tap .weui_cell{padding-left: 0;}
    .apply-call-tap .weui_cells{margin-top: 0;}
    .apply-call-tap .weui_cells:before,.apply-call-tap .weui_cells:after{border: 0;}
    .apply-call-select-doc{margin-top:10px;font-size: 16px;height: 18px;line-height: 18px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
    .apply-call-tap-box{padding: 10px 10px 20px 0;border-bottom: 1px solid #e5e5e5;margin-left: 10px;}
    .apply-call-tap-box .weui_uploader_file{margin-right: 20px;margin-bottom: 0;}
    .apply-call-tap-box .weui_uploader_input_wrp{margin-top: 20px !important;margin-left: 20px;}
    .apply-call-tap-box .weui_uploader_input_wrp.leh-ex{margin: 0 auto !important;float: inherit;}
    .apply-call-ipt-box .mint-cell-label.leh-c-black{line-height: 22px;word-wrap: break-word;word-break: break-all;overflow: hidden;width: 100%;}
    .will-pay-tip{width: 65%;height:40px;line-height:35px;background-color: #fff;border: 2px solid #1e94f4;box-sizing: border-box;color: #1e94f4;}
    .will-pay-tip~.mint-button-text{width: 35%;position: absolute;right: 0;top: 0;font-size: 14px;}
    .will-pay-tip span.icon-wx-will-pay{font-size: 20px;position: relative;top: 3px;margin-right: 4px;}
    .will-pay-tip span{font-size: 14px;}
    .apply-tip-box{padding: 10px 0;background-color: #fffad4;text-align: center;margin: 0 auto;}
    .apply-tip-box p{max-width: 90%;display: inline-block;line-height: 22px;font-size: 14px;color: #f77a66;}
    .book-not-pic{border-bottom:1px solid #e5e5e5;margin-left:10px;padding-bottom:10px}

</style>

<body id="apply">
<header class="mint-header is-fixed leh-bg-grey-head">
    <div class="mint-header-button is-left" @click="toBack()">
        <a>
            <span class="iconfont icon-wx-arr-left leh-c-green"></span>
        </a>
    </div>
    <h1 class="mint-header-title leh-c-black">申请详情</h1>
    <div class="mint-header-button is-right"> </div>
</header>

<div class="leh-float-box">
    <button class="mint-button mint-button--grey mint-button--large" v-if="applyContent.status==0">
        <label class="mint-button-text">预约待确认</label>
    </button>
    <button class="mint-button mint-button--grey mint-button--large" v-if="applyContent.status==3">
        <label class="mint-button-text leh-c-black">预约已关闭</label>
    </button>
    <div class="will-pay-tip" v-if="applyContent.status==1">
        <span class="iconfont icon-wx-will-pay"></span>
        <span>待支付：{{applyContent.price}}元</span>
    </div>
    <button class="mint-button mint-button--blue mint-button--large" v-if="applyContent.status==1">
        <label class="mint-button-text" @click="payrequest()">付款</label>
    </button>
</div>
<div class="leh-wrap" id="bodybox">
    <div class="apply-tip-box" v-if="applyContent.status!=0">
        <p v-if="applyContent.status==3">医生暂无时间，本次预约已关闭，如有问题，可<span class="leh-c-red-strong">在线留言</span>或到<span class="leh-c-red-strong">门诊</span>预约面诊</p>
        <p v-if="applyContent.status==1">预约成功，时间为：{{applyContent.serviceDate}} {{applyContent.serviceTime}}</br>请尽快付款!</p>
    </div>
    <div class="page-cell apply-title-box">
        <a class="mint-cell">
            <span class="mint-cell-mask">
                <div class="apply-img">
                    <img :src="applyContent.drPhoto"/>
                </div>
            </span>
            <div class="mint-cell-title">
                <span class="mint-cell-text">
                    <span class="leh-fs-sixteen">{{applyContent.drName}}&nbsp;</span>
                    <span class="leh-fs-fourteen leh-c-grey" v-text="applyContent.drTitle"></span>
                    <span class="leh-fs-fourteen fr"><span class="leh-c-blue-strong" v-text="applyContent.price"></span> 元/次</span>
                </span>
                <span class="mint-cell-label leh-c-black">
                    <span class="leh-c-grey" v-text="applyContent.hosipital"></span>
                    <span class="fr">通话{{applyContent.duration}}分钟</span>
                </span>
            </div>
            <div class="mint-cell-value"></div>
        </a>
    </div>
    <div class="page-cell apply-call-ipt-box">
        <a class="mint-cell">
            <label class="mint-cell-title">
                <span class="mint-cell-text leh-c-green">接听人电话<span class="leh-c-red"> *</span></span>
                <span class="mint-cell-label leh-c-black" v-text="applyContent.tel"></span>
            </label>
            <div class="mint-cell-value"></div>
        </a>
        <a class="mint-cell">
            <label class="mint-cell-title">
                <span class="mint-cell-text leh-c-green">病情描述<span class="leh-c-red"> *</span></span>
                <span class="mint-cell-label leh-c-black" v-text="applyContent.diseaseDecription"></span>
            </label>
            <div class="mint-cell-value"></div>
        </a>
        <a class="mint-cell">
            <label class="mint-cell-title">
                <span class="mint-cell-text leh-c-green">相关图片</span>
            </label>
            <div class="mint-cell-value"></div>
        </a>
    </div>
    <div class="book-not-pic" v-if="applyContent.photos.length == 0">暂无图片</div>
    <div class="apply-call-tap-box" v-else>
        <div class="apply-call-tap">
            <div class="weui_cells weui_cells_form">
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="weui_uploader">
                            <div class="weui_uploader_bd">
                                <ul class="weui_uploader_files">
                                    <li class="weui_uploader_file" v-for="items in applyContent.photos" @click="showPic()">
                                        <img :src="items"/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-cell apply-call-ipt-box">
        <a class="mint-cell">
            <label class="mint-cell-title">
                <span class="mint-cell-text leh-c-green">温馨提示</span>
                <div class="mint-cell-label">
                    <p>1. 预约确认通过后，用户需在距预约时间的30分钟前进行付款，否则付款将会关闭。</p>
                    <p>2. 付款成功后，用户需在预约时间前后保持电话通畅，以免联系不到。</p>
                    <p>3. 通话开始前，您将接到400-966-8838或02126125797，此号码将是接通您和医生的第三方号码，请勿拒接。</p>
                </div>
            </label>
            <div class="mint-cell-value"></div>
        </a>
    </div>
</div>
<!-- 用于展示插件的容器 -->
<div class="overlay" id="overlay"></div>


<script type='text/javascript' src='http://wx.jk7.com/html/js/zepto-v1.2.0-min.js' charset='utf-8'></script>
<script type="text/javascript" src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js' charset='utf-8'></script>
<script type="text/javascript" src='http://wx.jk7.com/html/js/MPreview.mobile.min.js' charset='utf-8'></script>
<script type="text/javascript" src='./assets/js/vue.min.js'></script>

<script>
    var vue;
    function vue_init () {
        vue = new Vue({
            el: "#apply",
            data: {
                id:'',
                openID:'',
                applyContent:[],
                isType:'',
                orderid:'',
                drid:'',
                total_fee:'',
                loadBox: '<div class="ball-beat"><div></div><div></div><div></div></div>', // 加载主体
                loadmask: '<div class="maskbox"></div>', // 加载遮罩
            },
            ready: function () {
                // 获取URL参数
                function getQueryString (key) {
                    var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");
                    var result = window.location.search.substr(1).match(reg);
                    return result?decodeURIComponent(result[2]):null;
                }
                //this.openID = getQueryString('openID')
                this.isType = getQueryString('isType');
                this.id = getQueryString('id')

                this.getApply(this.id)

                // 上传图片，验证签名
                function pageConfig() {
                    $.ajax({
                        url: 'http://wx.jk7.com/api/valid',
                        type: 'GET',
                        dataType: "json",
                        contentType: 'application/x-www-form-urlencoded',
                        data: {
                            pageurl: window.location.href
                        },
                        success: function (data) {

                            wxconfig(data);
                        }
                    });
                }
                pageConfig()

                function wxconfig (data){
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appId, // 必填，公众号的唯一标识
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        signature: data.signature, // 必填，签名，见附录1
                        jsApiList: [
                            'checkJsApi',
                            'chooseImage',
                            'previewImage',
                            'uploadImage',
                            'downloadImage',
                            'translateVoice'
                        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                }

                wx.hideMenuItems({
                    menuList: ["menuItem:share:appMessage","menuItem:share:timeline","menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:facebook","menuItem:share:QZone","menuItem:copyUrl","menuItem:originPage","menuItem:openWithQQBrowser","menuItem:openWithSafari"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
                });

            },
            methods: {
                getApply(id){
                    var _self = this
                    $.ajax({
                        type: "GET",
                        url: 'http://wx.jk7.com/api/telService/info?id=' + id,
                        dataType: 'json',
                        beforeSend: function (data){
                            var moaalBody = document.body
                            $(moaalBody).append(_self.loadBox)
                            $(moaalBody).append(_self.loadmask)
                        },
                        success: function (data) {
                            var res = data.data
                            $('.ball-beat').remove()
                            $('.maskbox').remove()
                            _self.applyContent = res
                            _self.openID = res.openId
                            _self.drid = res.drId
                            _self.total_fee = res.price
                            _self.orderid = res.orderId

                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert('网络出错')
                            return;
                        }
                    });
                },
                toBack(){
                    var _self = this
                    if(_self.isType == 1){
                        window.location.href='http://wx.jk7.com/online/book?active=apply'
                    }else if(_self.isType == 0){
                        window.location.href='http://wx.jk7.com/home'
                    }
                },
                showPic: function () {
                    var _self = this
                    this.wrapPic(_self.applyContent.photos, '申请详情') // 查看图片
                },
                wrapPic: function (picArr, titName) {

                    var wrap = document.querySelector('#overlay'),
                            title = titName || '查看图片',
                            data = [];

                    if(typeof(picArr) === 'string'){
                        data.push(picArr)
                    }else if(typeof(picArr) === 'object'){
                        data = picArr
                    }else {
                        console.log('图片变量类型必须为string或object' + typeof(picArr))
                    }
                    wrap.className = wrap.className + ' in';

                    // 延迟初始化插件是为了让CSS动画走完
                    setTimeout(function() {
                        MPreview({
                            data: data,
                            title: title,
                            direction: 'left',
                            wrap: '#overlay',
                            init: function() {
                            },
                            close: function() {
                                wrap.className = wrap.className.replace(' in', '');
                            }
                        });
                    }, 400);

                },
                //付款
                payrequest: function () {
                    var _self = this
                    var promise = $.ajax({
                        //需要参数：openid, total_fee（订单金额）,drid(医生ID)，orderid（订单ID）
                        //openid=&total_fee=&drid=&orderid=&servicetype=1
                        url: 'http://120.76.42.106/wxpay/payrequest.aspx?openid='+_self.openID+'&total_fee='+_self.total_fee+'&drid='+_self.drid+'&orderid='+_self.orderid+'&servicetype=1',
                        type: 'get',
                        dataType: "text",
                        contentType: 'application/x-www-form-urlencoded',
                        success: function(o) {

                            o = JSON.parse(o);
                            WeixinJSBridge.invoke(
                                    'getBrandWCPayRequest', {
                                        "appId": "wxfc314739ff527341",
                                        "timeStamp": o.timeStamp,
                                        "nonceStr": o.nonceStr,
                                        "package": o.package,
                                        "signType": "MD5",
                                        "paySign": o.paySign
                                    },
                                    function(res) {

                                        if(res.err_msg == "get_brand_wcpay_request:ok") {
                                            //支付成功
                                            window.location.href='http://wx.jk7.com/online/bookContent?id='+ _self.id
                                            return
                                        }
                                        else if(res.err_msg == "-1") {
                                            //接口错误，跳转到指定页面并弹出失败信息
                                            alert(res.err_msg);
                                        }
                                        else
                                        {
                                            //微信接口错误，跳转到指定页面并弹出失败信息
                                        }
                                    }
                            );

                            if(typeof WeixinJSBridge == "undefined") {
                                if(document.addEventListener) {
                                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                                } else if(document.attachEvent) {
                                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                                }
                            } else {
                                onBridgeReady();
                            }

                        }

                    });
                }


            }
        });

    }
    vue_init()

</script>
</body>
</html>
